<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css渲染表单</title>
</head>
<style>
input[type=text],select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input[type=sumbit] {
    width: 100%;
    background-color: #4caf50;
    color: white;
    padding: 14px 20px ;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=sumbit]:hover {
    background-color: #45a049;
}
div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>
<body>
 <h3>使用css来渲染HTML的表单元素</h3>
 <div>
     <form action="/action-page.php">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="firstname" placeholder="your name..">
        <label for="lname">last name</label>
        <input type="text" id="lname" name="lastname" placeholder="your last name">
        <label for="country">country</label>
        <select id="country" name="country">
            <option value="australia">Australia</option>
            <option value="canada">Canada</option>
            <option value="usa">USA</option>
            </select>
            <input type="sumbit" value="sumbit">
            </form>
            </div>
            </body>
</html>  